@import (reference) '~weaver-mobile/dist/weaver-mobile.less';
@import (reference) './index.less';

@blogReportWrapCls: blog-report;

.@{blogReportWrapCls} {
  height: 100%;
  background: @fill-base;
  color: @color-text-paragraph;
  position: relative;
  /* 我的报表 */
  &-myReport {
    display: flex;
    flex-direction: column;
    height: calc(~'100% - '@tabs-height);
    &-date {
      text-align: center;
    }
    &-main {
      height: calc(~'100% - '164 * @hd);
      &-title {
        width: 95%;
        margin: 0 auto;
        border-collapse: collapse;
        box-sizing: border-box;
        tr td {
          width: 25%;
          height: 36 * @hd;
          box-sizing: border-box;
          border: 1 * @hd solid @border-color-base;
          text-align: center;
        }
      }
      &-content {
        height: calc(~'100% - ' 37 * @hd);
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        &-main {
          width: 95%;
          margin: 0 auto;
          border-collapse: collapse;
          tr td {
            width: 25%;
            height: 36 * @hd;
            box-sizing: border-box;
            border: 1 * @hd solid @border-color-base;
            text-align: center;
          }
          tr:first-child td {
            border-top: none !important;
          }
        }
       
      }
      &-content::-webkit-scrollbar {
        width: 0;
        height: 0;
      } 
    }
    &-tip {
      padding: 0 9 * @hd;
      box-sizing: border-box;
      border-top: 1 * @hd solid @border-color-base;
      &-title {
        margin-top: 9 * @hd;
      }
      &-value:first-child {
        margin-right: 0;
      }
      &-value {
        display: inline-block;
        width: 25%;
        >span {
          display: inline-block;
          margin-left: 9 * @hd;
        }
      }
      &-row:last-child {
        padding-bottom: 15 * @hd;
      }
      &-row {
        margin-top: 10 * @hd;
        &-value {
          display: inline-block;
          margin: 5 * @hd 0;
        }
        &-red {
          color: red;
        }
      }
    }
    &-loading {
      width: 36 * @hd;
      height: 36 * @hd;
      margin: auto;
      position: absolute;
      top: -82 * @hd;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }
  /* 关注报表 */
  &-concern {
    position: absolute;
    width: 100%;
    top: @tabs-height;
    bottom: 0;
    &-loading {
      position: absolute;
      left: 50%;
      right: 0;
      top: 27%;
      bottom: 0;
    }
    &-container {
      height: 100%;
      &-date {
        height: @list-item-height;
        line-height: @list-item-height;
        border-bottom: @border-width-sm solid @border-color-base;
        padding-right: 2%;
        .wm-date-switch {
          display: flex; // 为了保证功能不收影响
          min-width: 42%;
          max-width: 50%;
        }
        &-total {
          color: @color-text-placeholder;
          line-height: 20 * @hd;
        } 
        &-detail {
          &-tip {
            .am-icon {
              position: relative;
              top: 2 * @hd;
            }
            >span {
              padding-left: 3 * @hd;
            }
          }
        }
      }
      /* 统计视图 */
      &-totalMain {
        position: absolute;
        width: 100%;
        top: @list-item-height;
        bottom: 0;
        &-head {
          border-bottom: @border-width-sm solid @border-color-base;
          height: @list-item-height-sm;
          line-height: @list-item-height-sm;
          &-nbsp {
            display: inline-block;
            width: 30%;
          }
          &-text {
            display: inline-block;
            width: 70%;
            border-left: @border-width-sm solid @border-color-base;
            text-align: center;
            box-sizing: border-box;
          }
        }
        &-content {
          position: absolute;
          width: 100%;
          top: @list-item-height-sm;
          bottom: 0;
          overflow-y: scroll;
          -webkit-overflow-scrolling: touch;
          &-col {
            height: @list-item-height-sm;
            line-height: @list-item-height-sm;
            box-sizing: border-box;
            border-bottom: @border-width-sm solid @border-color-base;
            overflow: hidden;
            >div {
              box-sizing: border-box;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              height: 100%;
            }
            &-name {
              display: inline-block;
              float: left;
              width: 30%;
              padding-left: 2%;
              .am-avatar {
                top: 50%;
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                transform: translateY(-50%);
              }
              &-user {
                margin-left: 3%;
                max-width: 63%;
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
            }
            &-num {
              display: inline-block;
              border-left: @border-width-sm solid @border-color-base;
              padding-left: 6%;
              text-align: right;
              width: 20%;
            }
            &-index {
              display: inline-block;
              padding-left: 18 * @hd;
              width: 50%;
              .am-rate {
                display: inline-block;
                position: relative;
                top: 1 * @hd;
              }
              .am-icon-xxs {
                width: 12 * @hd;
                height: 12 * @hd;
              }
              span {
                padding-left: 16 * @hd;
                font-size: 12 * @hd;
                color: #FFA83D;
              }
            }
          }
        }
      }
      /* 明细视图 */
      &-detailMain {
        position: absolute;
        top: @list-item-height;
        bottom: 0;
        width: 100%;
        // display: flex;
        /* 头部 */
        &-header {
          width: 100%;
          height: @list-item-height-sm;
          line-height: @list-item-height-sm;
          overflow: hidden;
          white-space: nowrap;
          border-bottom: @border-width-sm solid @border-color-base;
          display: flex;
          box-sizing: border-box;
          &-left {
            width: 30%;
            text-align: center;
            box-sizing: border-box;
            border-right: @border-width-sm solid @border-color-base;
          }
          &-right {
            display: flex;
            width: 70%;
            overflow: hidden;
            // overflow-x: scroll;
            // -webkit-overflow-scrolling: touch;
            >div:not(:last-child) {
              box-sizing: border-box;
              border-right: @border-width-sm solid @border-color-base;
            }
            &-value {
              display: inline-block;
              width: @list-item-height-sm - 2;
              text-align: center;
            }
          }
          &-right::-webkit-scrollbar {
            width: 0;
            height: 0;
          }
        }
        /* 内容展示 */
        &-content {
          width: 100%;
          overflow: hidden;
          white-space: nowrap;
          display: flex;
          position: absolute;
          top: @list-item-height-sm;
          bottom: 0;
          &-left {
            width: 30%;
            box-sizing: border-box;
            overflow: hidden; // 阻止左侧滑动
            // overflow-y: scroll;
            // -webkit-overflow-scrolling: touch;
            &-name {
              height: @list-item-height-sm;
              line-height: @list-item-height-sm;
              border-bottom: @border-width-sm solid @border-color-base;
              border-right: @border-width-sm solid @border-color-base;
              box-sizing: border-box;
              padding-left: 2%;
              // >span {
              //   display: inline-block;
              //   height: 100%;
              // }
              .am-avatar {
                top: 50%;
                -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                -o-transform: translateY(-50%);
                transform: translateY(-50%);
              }
              &-user {
                margin-left: 3%;
                max-width: 63%;
                display: inline-block;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }
            }
          }
          &-left::-webkit-scrollbar {
            width: 0;
            height: 0;
          } 
          &-right {
            width: 70%;
            overflow: auto;
            -webkit-overflow-scrolling: touch;
            box-sizing: border-box;
            &-tr {
              display: flex;
              height: @list-item-height-sm;
              line-height: @list-item-height-sm;
              &-td {
                border-bottom: @border-width-sm solid @border-color-base;
                box-sizing: border-box;
                >span {
                  display: inline-block;
                  width: @list-item-height-sm - 2;
                  text-align: center;
                  box-sizing: border-box;
                }
              }
              &-td:not(:last-child) {
                border-right: @border-width-sm solid @border-color-base;
              }
            }
            // &-tr:last-child {
            //   div {  // 如果继续使用&-td 匹配不到相应的标签
            //     border-bottom:0 !important;
            //   }
            // }
          }
          &-right::-webkit-scrollbar {
            width: 0;
            height: 0;
          }
        }
      }
    }
  }
}